<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import {
  businessTripExpenseAdd,
  businessTripExpenseFind,
  businessTripExpenseRemove
} from '@/api/businessTrip/businessTrip'
import { Modal } from '@arco-design/web-vue'
import { useGlobalStore } from '@/stores/global'
import { useRoute } from 'vue-router'

const route = useRoute()
const globalStore = useGlobalStore()

// 搜索表单
const searchForm = reactive({
  // 显示控制
  visible: true,
  // 表单
  form: {
    businessTripID: null,//出差id
    expenseType: null  //类型
  },
  // 搜索
  search: () => {
    businessTripExpenseFind(searchForm.form,
      searchForm.list.pageSize,
      searchForm.list.pageNum
    ).then((resp: any) => {
      searchForm.list = resp.data
    })
  },
  // 重置
  reset: () => {
    searchForm.form.expenseType = null  //类型
  },
  // table 数据
  list: {
    list: [],
    total: 0,
    pageSize: 10,
    pageNum: 1
  }
})

// 操作数据表单
const operationForm = reactive({
  // 弹框标题
  title: '添加出差费用明细',
  // 是否显示
  visible: false,
  // 表单
  form: {} as any,
  // 验证
  rules: {
    amount: [{ required: true, message: '费用不能为空' }],
    expenseType: [{ required: true, message: '类型不能为空' }]
  },
  reset: () => {
    operationForm.form = {
      id: null,  //id
      amount: null,  //费用
      snapshoot: null,  //快照
      expenseType: null,  //类型
      businessTripID: Number(route.query.id),  //出差ID
      createBy: null  //CreateBy
    }
  },
  // 打开弹框
  open: () => {
    operationForm.title = '添加出差费用明细'
    operationForm.visible = true
    operationForm.reset()
  },
  remove: (record: any) => {
    Modal.confirm({
      title: '警告！',
      content: `是否确认删除 [${record.id}] 出差费用明细？`,
      onOk(e) {
        businessTripExpenseRemove(record.id, Number(route.query.id)).then(() => {
          searchForm.search()
        })
      }
    })
  },
  submit: ({ errors, values }: any) => {
    if (errors) return

    businessTripExpenseAdd(values).then(() => {
      operationForm.visible = false
      searchForm.search()
    })
  }
})

onMounted(() => {
  document.title = 'Rocc管理系统 出差费用明细管理'
  searchForm.form.businessTripID = Number(route.query.id)
  searchForm.search()
})


//头像上传
const file = ref()

const onChange = (_: any, currentFile: any) => {
  if (currentFile.response) {
    operationForm.form.snapshoot = '/api' + currentFile.response.data
  }
  file.value = {
    ...currentFile
    // url: URL.createObjectURL(currentFile.file),
  }
}
const onProgress = (currentFile: any) => {
  console.log('进度变化', currentFile)
  file.value = currentFile
}

</script>

<template>
  <div class="w-full h-full">

    <!-- 搜索表单 -->
    <a-form v-show="searchForm.visible">
      <a-row :gutter="10">
        <a-col :sm="12" :md="6">
          <a-form-item label="类型">
            <a-input v-model="searchForm.form.expenseType" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-space>
            <a-button @click="searchForm.search">
              <template #icon>
                <icon-search />
              </template>
              搜索
            </a-button>
            <a-button @click="searchForm.reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <!-- 搜索表单end -->


    <!-- 功能区域 -->
    <div class="flex justify-between mr-1">
      <a-space wrap>
        <a-button type="primary" @click="operationForm.open">
          <template #icon>
            <icon-plus />
          </template>
          添加出差费用明细
        </a-button>
        <a-button>
          <template #icon>
            <icon-download />
          </template>
          导出出差费用明细
        </a-button>
      </a-space>
      <a-space>
        <a-tooltip content="刷新列表" @click="searchForm.search" position="tr">
          <a-button size="small" shape="circle">
            <template #icon>
              <icon-refresh />
            </template>
          </a-button>
        </a-tooltip>

        <a-tooltip content="隐藏搜索" position="tr" @click="searchForm.visible = !searchForm.visible">
          <a-button size="small" shape="circle">
            <template #icon>
              <icon-search />
            </template>
          </a-button>
        </a-tooltip>

      </a-space>
      <!-- 功能区域end -->
    </div>

    <!-- 表单区域 -->
    <a-drawer v-model:visible="operationForm.visible" :title="operationForm.title" :width="500" :footer="false">
      <a-form ref="operationFormRef" :model="operationForm.form" @submit="operationForm.submit"
              :rules="operationForm.rules">
        <a-form-item hide-asterisk label="费用" field="amount" validate-trigger="blur">
          <a-input-number v-model="operationForm.form.amount" />
        </a-form-item>

        <a-form-item hide-asterisk label="类型" field="expenseType" validate-trigger="blur">
          <a-select v-model="operationForm.form.expenseType">
            <a-option :value="Number(k)" :label="v"
                      v-for="(v,k) of globalStore.global.caches.commons.businessTripExpense" :key="k" />
          </a-select>
        </a-form-item>

        <a-form-item hide-asterisk label="快照" field="snapshoot" validate-trigger="blur">
          <a-upload
            action="/api/upload"
            :fileList="file ? [file] : []"
            :show-file-list="false"
            @change="onChange"
            @progress="onProgress"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
              >
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="file && file.url"
                >
                  <img :src="file.url" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                  <a-progress
                    v-if="file.status === 'uploading' && file.percent < 100"
                    :percent="file.percent"
                    type="circle"
                    size="mini"
                    :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                  />
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                    <div style="margin-top: 10px; font-weight: 600">Upload</div>
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>

    <a-table :data="searchForm.list.list" :pagination="false">
      <template #columns>
        <a-table-column title="id" data-index="id" />
        <a-table-column title="费用" data-index="amount" />
        <a-table-column title="快照" data-index="snapshoot">
          <template #cell="{record}">
            <a-image :src="record.snapshoot" height="35" />
          </template>
        </a-table-column>
        <a-table-column title="类型" data-index="expenseType">
          <template #cell="{record}">
            {{ globalStore.global.caches.commons.businessTripExpense[record.expenseType] }}
          </template>
        </a-table-column>
        <a-table-column title="出差ID" data-index="businessTripID" />
        <a-table-column title="CreateBy" data-index="createBy" />
        <a-table-column title="操作" width="160">
          <template #cell="{record}">
            <a-space>
              <a-button status="danger" @click="operationForm.remove(record)">
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <div class="mt-4 flex justify-end">
      <a-pagination v-model:current="searchForm.list.pageNum"
                    v-model:page-size="searchForm.list.pageSize"
                    :total="searchForm.list.total"
                    @change="searchForm.search"
                    show-total
                    show-jumper
                    show-page-size
      ></a-pagination>
    </div>
  </div>
</template>

<style scoped>

</style>
